<template>
  <el-form
    ref="baseCaseForm"
    :model="form"
    :rules='formRules'
    class="baseCaseForm"
    label-width="100px"
  >
    <el-form-item
      prop="setid"
      label="业务单位"
    >

      <el-select style="width:315px" v-model ='form.setid' clearable>
        <el-option v-for='(k,i) in setidSelectList' :label='k.business_descr' :value="k.setid"></el-option>
      </el-select>

    </el-form-item>

    <el-form-item
      prop="dingdian"
      label="顶点部门"
      style='width:415px;position:relative'
      @mouseleave.native.stop='dingdianDeleteIcon = false'
      @mouseenter.native.stop='showCloseIcon("dingdian")'
     >
      <el-input readonly :disabled="!form.setid" @focus='handleIconClick' :on-icon-click="handleIconClick" v-model.trim="form.dingdian" icon="search"></el-input>
      <i @click.stop= 'emptyDeptid' v-show='dingdianDeleteIcon' class='close-x el-icon-circle-cross'></i>

    </el-form-item>

    <el-form-item
      prop="end"
      label='期间'
    >
      <el-date-picker
        style='width:150px'
        v-model.trim="form.start"
        format="yyyy-MM-dd"
        @change='(val)=>form.start = val'
        placeholder="开始时间">
      </el-date-picker>
        &nbsp;&nbsp;
      <el-date-picker
        style='width:150px'
        v-model.trim="form.end"
        format="yyyy-MM-dd"
        @change='(val)=>form.end = val'
        placeholder="结束时间">
      </el-date-picker>
      
    </el-form-item>


    <el-form-item
      prop="yAxis"
      label="纵轴纬度"
    > 
     <el-select
        style='width:150px'
        clearable
        v-model.trim ='form.yAxis'
        @change='expandChange'
      >
        <el-option 
          v-for='(k,i) in ySelectList'
          :label='k.label'
          :value='k.value'
          :key='i'>
        </el-option>
      </el-select> 
      &nbsp;&nbsp;

      <span v-if='form.yAxis ==1'>
        <label style="margin-right:12px">展开层级</label>
        <el-input-number
          style='width:150px'
          v-model="form.tier"
          :min="1"
          :max='max'>
        </el-input-number>
      </span>
      

    </el-form-item>

    <xAaxis />

    <el-form-item
      prop="count"
      label="统计字段"
    >
      <el-select
        v-model="form.count"
        multiple
        filterable
        allow-create
        class="count"
        placeholder=""
        >
        <el-option
          v-for="item in countSelectList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
   
    <el-form-item>
      <el-button type="primary" @click="submitForm('baseCaseForm')">搜索</el-button>
      <!-- <a class='saveOption'>保存搜索条件</a> -->
    </el-form-item>
  </el-form>
</template>

<script>
import Vue from 'vue'
import xAaxis from './xAxis'
import Bus from './bus'
import { DatePicker, Message, InputNumber } from 'element-ui'
Vue.use(InputNumber)
Vue.use(DatePicker)
export default {
  components: {
    xAaxis
  },
  data () {
    const rule_end = (rule, value, callback) => {

      if (!value || !this.form.start) {
        return callback(new Error('请选择起止时间'))
      }
      callback()
    }
    const rule_xAxis = (rule, value, callback) => {

      if (!value) {
        return callback(new Error('至少选择一种横轴纬度'))
      }


      if (Object.values(this.xOption).filter(ele => ele !== '').length < 2) {
        return callback(new Error('请选择学历类型'))
      }
      
      callback()
    }

    return {
      formRules: {
        setid: [{ required: true, message: '业务单位为必选项' }],
        end: [{ required: true, validator: rule_end, trigger: 'submit' }],
        xAxis: [{ required: true, validator: rule_xAxis, trigger: 'blur' }],
        yAxis: [{ required: true, message: '请选择纵轴纬度', trigger: 'blur' }],
        count: [{ required: true, message: '至少选择一种统计字段' }]
      },
      countSelectList: [
        {
          value: '1',
          label: '01-期初人数'
        }, {
          value: '2',
          label: '02-期末人数'
        }, {
          value: '3',
          label: '03-期间平均人数'
        }, {
          value: '4',
          label: '04-期间入职人数'
        }, {
          value: '5',
          label: '05-期间离职人数'
        }, {
          value: '6',
          label: '06-期间调入人数'
        }, {
          value: '7',
          label: '07-期间调出人数'
        }],
      form: {
        setid: '',
        xAaxis: '',
        dingdian: '',
        start: '',
        end: '',
        yAxis: '',
        tier: 0,
        count: []
      },
      xOption: {},
      setidSelectList: [],
      setidDeleteIcon: false,
      dingdianDeleteIcon: false,
      ySelectList: [{
        label: '01-组织架构',
        value: '1'
      },
      {
        label: '02-集团标准职级',
        value: '2'
      }],
      dialogVisible: false,
      params: {
        countfieldNameType: '',
        deptId: '',
        flag: ''
      },
      tableData: [],
      max: 0
    }
  },
  watch: {
    'form.setid' (newValue) {
      this.form.dingdian = ''
      this.params.deptId = ''
      newValue && (this.setMaxVal())
      this.expandChange(this.form.yAxis, false)
    },

    'params.deptId' (newValue) {
      newValue && (this.setMaxVal())
    }
  },
  methods: {
    // 提交yAxis 以判断表格是集团标准职级还是组织架构
    emityAxisAndTier () {
      this.form.yAxis !== '1' && (this.form.tier = 0)
      Bus.$emit('yAxis', this.form.yAxis)
      Bus.$emit('tier', this.form.tier)
    },
    expandChange (val, messageVisible = true) {
      if (val == '1' && !this.form.setid) {
        messageVisible && Message.warning('请先选择业务单位')
        this.form.yAxis = null
      }
    },

    emptyDeptid () {
      this.form.dingdian = ''
      this.params.deptId = ''
      this.dingdianDeleteIcon = false
      this.setMaxVal()
    },
    setMaxVal () {
      const params = {
        deptId: this.params.deptId,
        setId: this.form.setid
      }
      this.Axios
        .Post('/empBaseInfo/getMaxHierarchy', params)
        .then((res) => {
          this.max = this.form.tier = parseInt(res.data.datas)
        })
    },
    submitForm (formName) {
      if (!this.xOption.education && !this.xOption.educationSelect) {

      }
      this.$refs[formName].validate((valid) => {
        this.emityAxisAndTier()
        this.setParams()

        if (valid) {

          return new Promise((reslove) => {

            this.setTableData()
            reslove()
          }).then(() => {

          }).catch(() => { Bus.$emit('tableVisible', true) })

        } else {
          window.scrollTo(0, 0)
          return false
        }
      })
    },

    getFlag () {
      let str = ''
      for (const key in this.params) {
        if (key !== 'token' && key !== 'flag') {
          str += this.params[key]
        }
      }
      return str
    },

    setParams () {
      this.params.education = this.xOption.educationSelect
      this.params.educationTitle = this.xOption.educationTitle
      this.params.sex = this.xOption.sexSelect
      this.params.jobRes = this.xOption.zhiwuzhizeSelect
      this.params.marriage = this.xOption.marrySelect
      this.params.recruitment = this.xOption.joinSelect
      this.params.jobCategories = this.xOption.postSelect
      this.params.age = this.xOption.age
      this.params.workAge = this.xOption.workage
      this.params.groupService = this.xOption.group
      this.params.companyService = this.xOption.company
      this.params.countfieldNameType = this.xOption.countfieldNameType
      this.params.beginDate = this.form.start
      this.params.endDate = this.form.end
      this.params.setId = this.form.setid
      this.params.deptId = this.params.deptId
      this.params.tier = this.form.tier
      this.params.countType = this.form.count.join(',')
      this.params.flag = this.getFlag()
      Bus.$emit('params', this.params)
    },

    setTableHead () {
      this.Axios
        .Post('/empBaseInfo1/getTableHead', this.params)
        .then((res) => {
          Bus.$emit('tableCol', res.data.datas.tableHead_list)
          Bus.$emit('thirdCol', res.data.datas.condition_list)
          Bus.$emit('tableVisible', true)
          setTimeout(() => {
            window.scrollTo(0, document.body.scrollHeight - 700)
          }, 1)
        })
    },

    setTableData () {

      const params = {
        setId: this.form.setid,
        deptId: this.params.deptId,
        tier: this.form.tier,
        flag: this.params.flag
      }
      this.Axios
        .Post('/empBaseInfo1/getTableData_y', params)
        .then((res) => {
          Bus.$emit('tableData', res.data.datas)
          this.setTableHead()
        })

    },
    saveOption () {
    },


    handleIconClick () {
      if (this.form.setid) {
        Bus.$emit('dialogVisible', true)
        Bus.$emit('setid', this.form.setid)
      }
    },
    showCloseIcon (type) {
      this.form.setid && this.form[type] && (this[`${type}DeleteIcon`] = true)
    },

    setSetidSelectList () {
      this.Axios
        .Post('/empBaseInfo/getAllBusiness')
        .then(res => this.setidSelectList = res.data.datas)
    },
  },
  mounted () {
    Bus.$on('xOption', data => this.xOption = data)
    Bus.$on('dingdian', data => this.form.dingdian = data)
    Bus.$on('xAxis', data => this.form.xAxis = data)
    Bus.$on('deptId', data => this.params.deptId = data)
  },
  created () {
    this.setSetidSelectList()
  }
}
</script>

<style scoped lang='less'>
.baseCaseForm {
  padding-top: 30px;
  overflow: hidden;
  .saveOption {
    cursor: pointer;
    color: #41b883;
    margin-left: 15px;
  }

  .close-x {
    position: absolute;
    top: 12px;
    right: 11%;
    color: #bfcbd9;
    background-color: #fff;
    cursor: pointer;
  }
}
</style>

<style>
.baseCaseForm .count.el-select {
  min-width: 500px;
}
.baseCaseForm .count.el-select .el-input input {
  min-height: 90px;
}

/* .baseCaseForm .count.el-select .el-select__tags {
  top: 20%;
}
.baseCaseForm .count.dayu5.el-select .el-select__tags {
  top: 32%;
} */
</style>
